<template>
  <div id="root">
    <div :class="{ 'hot-tips': ishot, 'newest-tips': !ishot }">
      <div class="tip-one">{{ message }}</div>
      <div class="tip-two">{{ supplement }}</div>
    </div>
    <div class="hot-goods" v-if="goodsData.length == 5" style="width:80%">

      <el-divider content-position="left">404</el-divider>
      <span>该地区无商品出售</span>
      <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

    </div>
    <div class="hot-goods" v-if="goodsData.length <= 4">
      <div
        class="hot-goods-card"
        v-for="(item, index) in goodsData"
        :key="item.picture"
        :class="{ one: index == 0 }"
      >
        <el-image
          style="width: 100%; height: 80%;cursor: pointer;"
          :src="item.picture"
          fit="cover"
          @click="getGoodsDetailed(item.id)"
        ></el-image>
        <div class="title" style="cursor: pointer;" @click="getGoodsDetailed(item.id)">{{ item.goodsName }}</div>
        <div class="price">￥{{ item.price }}</div>
      </div>
    </div>
    <div :class="{ 'hot-more': ishot, 'newest-more': !ishot }" v-if="goodsData.length > 0">
      <div @click="lookAll"><p>查看全部（{{count}}）</p></div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import { getHotGoods, getNewGoods,getGoodsCount } from "@/api/productApi";
//newest
export default {
  props: {
    ishot: {
      type: Boolean,
      required: true,
    },
    message: {
      type: String,
      required: true,
    },
    supplement: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      goodsData: [],
      scrollCount: 0,
      jquery_self: null,
      count : 0
    };
  },
  created() {
    getGoodsCount().then(res => {
      this.count = res.data
    })
    if (this.ishot) {
      getHotGoods()
        .then((res) => {
          if (res.code == 0) {
            this.goodsData = res.data;
            if(res.data.length == 0){
              this.goodsData = [1,2,3,4,5].concat()
            }
          } else {
            this.$message.error("获取商品列表失败" + res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    } else {
      getNewGoods()
        .then((res) => {
          if (res.code == 0) {
            this.goodsData = res.data;
            if(res.data.length == 0){
              this.goodsData = [1,2,3,4,5].concat()
            }
          } else {
            this.$message.error("获取商品列表失败" + res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    }
  },
  mounted() {
    if (this.ishot) {
      this.handleScroll("hot-tips", "30%");
      this.handleScroll("hot-more", "15%");
    } else {
      this.handleScroll("newest-tips", "30%");
      this.handleScroll("newest-more", "15%");
    }
  },
  methods: {
    lookAll(){
       this.$router.push({
        path : `/home/third_page`
      })
    },
    getGoodsDetailed(id){
      this.$router.push({
        path : `/home/goods_detailed/${id}`,
      })
    },
    handleScroll(className, width) {
      let _self = this;
      $(document).ready(function () {
        $(window).scroll(function () {
          let dom = document.querySelector(`.${className}`);
          if (dom != null) {
            var a = document.getElementsByClassName(className)[0].offsetTop;
            _self.jquery_self = this;
            //console.log("滚动事件");
            if (
              a >= $(window).scrollTop() &&
              a < $(window).scrollTop() + $(window).height()
            ) {
              // console.log(this);
              // $(this).unbind("scroll");
              _self.divShow(className, width);
              this.scrollCount++;
              if (scrollCount == 4) {
                $(this).unbind("scroll");
              }
            }
          } else {
            $(this).unbind("scroll");
          }
        });
      });
    },
    divShow(className, width) {
      $(document).ready(function () {
        $(`.${className}`).animate({ width }, 1500);
      });
    },
  },
  beforeDestroy() {
    $(this.jquery_self).unbind("scroll");
  },
};
</script>
<style lang="scss" scoped>
$rootHeight: 600px;

$tipsFontFamily: 微软雅黑;
$tipsBackgroundColor: rgba(255, 255, 255, 0);
$tipsHeight: 14%;

$tipTwoMarginTop: 2%;

$reGoodsMarginTop: 2%;
$reGoodsCardMarginLeft: 2.8%;
$reGoodsCardWidth: 20%;
$reGoodsCardHeight: 90%;

$titleMarginTop: 4%;

$moreHeight: 2%;
#root {
  height: $rootHeight;
  .hot-tips {
    font-family: $tipsFontFamily;
    width: 0;
    height: $tipsHeight;
    // overflow: hidden;
    //border: 1px solid red;
    .tip-one {
      font-size: 34px;
      color: rgb(51, 51, 51);
      background-color: $tipsBackgroundColor;
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: normal;
      text-shadow: none;
      white-space: nowrap;
    }
    .tip-two {
      font-size: 16px;
      color: rgb(51, 51, 51);
      background-color: $tipsBackgroundColor;
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: normal;
      text-shadow: none;
      margin-top: $tipTwoMarginTop;
      white-space: nowrap;
    }
  }
  .newest-tips {
    @extend .hot-tips;
  }
  .hot-goods {
    //border: 1px solid green;
    margin-top: $reGoodsMarginTop;
    height: 65%;
    .hot-goods-card {
      //border: 1px solid red;
      width: $reGoodsCardWidth;
      height: $reGoodsCardHeight;
      margin-left: $reGoodsCardMarginLeft;
      float: left;
      .title {
        text-align: left;
        font-family: $tipsFontFamily;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        color: rgb(51, 51, 51);
        line-height: 1.5em;
        height: 1.5em;
        margin-top: $titleMarginTop;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price {
        //margin-top: 9px;
        padding-bottom: 20px;
        text-align: left;
        font-family: $tipsFontFamily;
        font-style: normal;
        font-weight: 800;
        font-size: 16px;
        color: rgb(51, 51, 51);
      }
    }
    .one {
      margin-left: 0;
    }
  }
  .hot-more {
    width: 0;
    //height: $moreHeight;
    //border: 1px solid black;
    div {
      border: 1px solid black;
      width: 99%;
      text-shadow: none;
      white-space: nowrap;
      font-family: $tipsFontFamily;
      font-size: 16px;
      font-weight: 800;
      font-style: normal;
      letter-spacing: 0px;
      padding-left: 0px;
      border-radius: 6px;
      border-width: 1px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
    }
  }
  .newest-more {
    @extend .hot-more;
  }
}
</style>